<template>
    <div>
        <div class="top">
            <div class="title">系统通知</div>
            <div class="clear_notice" @click="readAllMsg">一键已读</div>
        </div>
        <div class="item" v-for="(item, index) in messageList" :key="index" @click="readMsg(item)">
            <div class="content">{{ item.content }}</div>
            <div class="read" :class="{ readed: item.is_read == 1 }">{{ item.is_read == 0 ? '未读' : '已读' }}</div>
            <div class="time">{{ item.create_time }}</div>
        </div>
        <el-empty description="暂无通知" :image-size="80" v-if="messageList.length == 0" />
        <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit"
            @pagination-change="handlePaginationChange" v-if="messageList.length > 0" />
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Message, MessageOneRead, MessageAllRead } from '@/api/user'
import Pagination from '@/components/Pagination.vue'

interface Message {
    id: number;
    company_id: number;
    content: string;
    create_time: string;
    is_read: number;
    type: number;
    update_time: string;
}

const messageList = ref<Message[]>([])
const total = ref(0)
const pageInfo = reactive({
    page: 1,
    limit: 10,
    type: 2
})
const unReadNum = ref(0)

const emit = defineEmits(['handle-success'])

const getList = async () => {
    await Message(pageInfo).then(res => {
        messageList.value = res.data.data
        total.value = res.data.count
        unReadNum.value = res.data.type2
    })
}

const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.page = page
    pageInfo.limit = size
    messageList.value = []
    getList()
}

const readMsg = (msg: Message) => {
    if (msg.is_read == 1) return
    MessageOneRead({
        id: msg.id
    }).then(() => {
        msg.is_read = 1
        emit('handle-success')
    })
}

const readAllMsg = () => {
    if (unReadNum.value == 0) return
    MessageAllRead().then(() => {
        messageList.value.forEach(item => {
            item.is_read = 1
        })
        emit('handle-success')
    })
}


onMounted(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.top {
    height: 65px;
    border-bottom: solid 1px #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;

    .clear_notice {
        color: #0059a9;
        cursor: pointer;
    }
}

.item {
    height: 62px;
    border-bottom: solid 1px #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .content {
        font-size: 14px;
        color: #666;
    }

    .time {
        font-size: 12px;
        color: #999;
        flex: 1;
        text-align: right;
    }

    .read {
        width: 43px;
        height: 22px;
        border-radius: 11px;
        text-align: center;
        line-height: 22px;
        background-color: #ff6862;
        color: #fff;
        margin-left: 8px;

        &.readed {
            background-color: #30af6a;
        }
    }
}
</style>